/*
 * 新增设备试妆参数
 * @Author: zfx
 * @Date: 2018-07-2 17:53:51
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-customer-machine-create {
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .machine-form {
            width: 350px;
        }
    }

</style>

<template>
	<div
		:style="{'max-height':formMaxHeight(true)}"
		class="v-customer-machine-create">
		<div>
			<Row
				type="flex"
				justify="start">
				<i-col push="1">
					<Form
						ref="formValidate"
						:model="formValidate"
						:rules="ruleValidate"
						:label-width="labelWidth(130, 140)"
						name="create-form"
						class="machine-form">

						<Form-item
							:label="$t('machine.model')"
							prop="code">
							<i-input
								v-model="formValidate.code"
								:placeholder="$t('machine.please_enter_model')"
								name="create-code"
								type="text"/>
						</Form-item>

						<Form-item
							v-for="item in machinesInfo"
							:key="item.field_name"
							:label="item.name">
							<Slider
								:value="Number(item.default_value)"
								:step="0.01"
								:min="Number(item.min_value)"
								:max="Number(item.max_value)"
								:name="`create-${item.field_name}`"
								show-input
								@on-change="changeSlider($event,item.field_name)"/>
						</Form-item>

						<Form-item>
							<Button
								type="primary"
								@click="handleSubmit('formValidate')">
								{{ $t('common.submit') }}
							</Button>

							<Button
								type="ghost"
								style="margin-left: 8px"
								@click="handleReset('formValidate')">
								{{ $t('common.reset') }}
							</Button>

						</Form-item>

					</Form>
				</i-col>
			</Row>
		</div>

	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

export default {
	name: 'MachineParametersCreate',
	mixins: [labelWidthMixin, computedFormMaxHeight],
	props: {
		products: {
			type: Array,
			default() {
				return [];
			},
		},
		machinesInfo: {
			type: Array,
			default() {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {

			formValidate: {

				code: '', // 参数型号

			}, // 新建美妆参数时的表单

			ruleValidate: {

				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('machine.model') }),
						trigger: 'blur,change',
					},
				],
			},

		};
	},

	watch: {
		machinesInfo() {
			if (this.machinesInfo.length > 0) {
				this.machinesInfo.forEach((item) => {
					this.formValidate[item.field_name] = Number(item.default_value);
				});
			}
		},
	},
	methods: {
		/**
		 * 动态设置数组参数值
		 * @param {Number} value {slider改变返回的值}
		 * @param {String} field_name {当前的field_name}
		 */
		changeSlider(value, field_name) {
			this.machinesInfo.forEach((machine) => {
				if (machine.field_name === field_name) {
					machine.default_value = value;
				}
			});
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.dataPost();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.machinesInfo.forEach((item) => {
				item.default_value = this.formValidate[item.field_name];
			});
		},

		/**
         * post数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = this.formDataCreate();

			this.$emit('post', form_data);
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {
				code: this.formValidate.code,
			};

			this.machinesInfo.forEach((err) => {
				new_object[err.field_name] = err.default_value;
			});
			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			return form_data;
		},

	},


};
</script>
